import QtQuick 2.6
import QtQuick.Layouts 1.1

import "../../Base/UiBase"
import "../../Base/Config"
import Code 1.0

Rectangle {
    id: root
    color: Color.background

    Component.onCompleted: {
        messageModel.append({
                                user: {
                                    name: "奥特曼打小怪兽  ",
                                    head: "../../../resources/tests/touxiang01.svg"
                                },
                                messageText: "123123123aaaaaaaa",
                                time: 1
                            })
        messageModel.append({
                                user: {
                                    name: "奥特曼打小怪兽  ",
                                    head: "../../../resources/tests/touxiang01.svg"
                                },
                                messageText: "!!!!!!!!!!!!!!!!!!!!!!!!!",
                                time: 2
                            })
        messageModel.append({
                                user: {
                                    name: "奥特曼打小怪兽  ",
                                    head: "../../../resources/tests/touxiang01.svg"
                                },
                                messageText: "!!!!!!!!!!!!!!!!!!!!!!!!!这里应该有多行这里应该有多行这里应该有多行这里应该有多行这里应该有多行  ",
                                time: 3
                            })
        messageModel.append({
                                user: {
                                    name: "奥特曼打小怪兽  ",
                                    head: "../../../resources/tests/touxiang01.svg"
                                },
                                messageText: "123123123aaaaaaaa",
                                time: 4
                            })
    }

    MouseArea {
        anchors.fill: parent
        z: -1
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // user.header
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 96 * Size.ratio
            color: Color.foreground
            RowLayout {
                width: parent.width
                height: parent.height
                MouseArea {
                    Layout.preferredWidth: 80 * Size.ratio
                    Layout.fillHeight: true
                    SvgzImage {
                        width: 80 * Size.ratio
                        height: 96 * Size.ratio
                        source: "../../../resources/comment/fanhiu01.svg"
                    }
                    onClicked: root.visible = false
                }
                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Text {
                        anchors.centerIn: parent
                        text: qsTr("私信")
                        font.pixelSize: Size.titleFont
                    }
                }
            }
            BottomDivider {
            }
        } // end user.header

        // body
        ListView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 0
            delegate: Rectangle {
                width: parent.width
                height: 120 * Size.ratio
                color: index % 2 ? Color.foreground : Color.foregroundDarker

                // body
                RowLayout {
                    anchors.fill: parent
                    spacing: 0
                    Item {
                        Layout.preferredWidth: height
                        Layout.fillHeight: true
                        HeadHolder {
                            anchors.centerIn: parent
                            SvgzImage {
                                width: 80 * Size.ratio
                                height: 80 * Size.ratio
                                source: user.head
                            }
                        }
                    }
                    // text body
                    ColumnLayout {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        spacing: 20 * Size.ratio
                        Text {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            verticalAlignment: Text.AlignVCenter
                            text: user.name
                            font.pixelSize: Size.normalFont
                            color: "#323232"
                        }
                        Text {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            verticalAlignment: Text.AlignVCenter
                            clip: true
                            text: messageText
                            color: Color.virtualInput

                            font.pixelSize: Size.normalFont
                            elide: Text.ElideRight
                        }
                    } // end text body

                    // text & red icon on the right
                    Item {
                        Layout.preferredWidth: 100 * Size.ratio
                        Layout.fillHeight: true
                        Layout.topMargin: 30 * Size.ratio
                        Layout.bottomMargin: 25 * Size.ratio

                        Text {
                            anchors {
                                top:parent.top
                                horizontalCenter: parent.horizontalCenter
                            }
                            text: Helper.dateToReadable(time)
                            font.pixelSize: Size.normalFont
                            color: Color.virtualInput
                        }
                        Rectangle {
                            width: 35 * Size.ratio
                            height: width
                            anchors {
                                bottom:parent.bottom
                                horizontalCenter: parent.horizontalCenter
                            }
                            radius: width / 2
                            color: "red"
                            Text {
                                anchors.centerIn: parent
                                font.pixelSize: Size.font26
                                text: String(1)
                                color: "#FFFFFF"
                            }
                        }
                    }
                } // end body

                BottomDivider {
                }
            }
            model: ListModel {
                id: messageModel
            }
        } // end body

        // footer
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 100 * Size.ratio
            color: "#dddddd"
            TopDivider {
            }
            RowLayout {
                anchors.fill: parent
                MouseArea {
                    Layout.preferredWidth: 100 * Size.ratio
                    Layout.fillHeight: true
                    SvgzImage {
                        anchors.centerIn: parent
                        width: 50 * Size.ratio
                        height: 50 * Size.ratio
                        source: "../../../resources/evaluation/p2p/teacher/xiaoanniu01.svg"
                    }
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 50 * Size.ratio
                    Layout.alignment: Qt.AlignVCenter
                    color: Color.foreground
                    radius: 5 * Size.ratio
                    TextInput {
                        anchors.fill: parent
                        padding: parent.radius
                        color: Color.input
                        font.pixelSize: Size.normalFont
                        verticalAlignment: TextInput.AlignVCenter
                    }
                }
                MouseArea {
                    Layout.preferredWidth: 100 * Size.ratio
                    Layout.fillHeight: true
                    SvgzImage {
                        anchors.centerIn: parent
                        width: 90 * Size.ratio
                        height: 60 * Size.ratio
                        source: "../../../resources/comment/fasong01.svg"
                    }
                }
            }
        } // end footer
    }
}
